
        <div class="row">
          <div class="col-md-3">
            <div class="sticky-top mb-3">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">可拖放事件</h4>
                </div>
                <div class="card-body">
                  <!-- 事件 -->
                  <div id="external-events">
                    <div class="external-event bg-success">午餐</div>
                    <div class="external-event bg-warning">回家</div>
                    <div class="external-event bg-info">做作业</div>
                    <div class="external-event bg-primary">UI 设计</div>
                    <div class="external-event bg-danger">睡觉</div>
                    <div class="checkbox">
                      <label for="drop-remove">
                        <input type="checkbox" id="drop-remove">
                        移除后删除
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">创建事件</h3>
                </div>
                <div class="card-body">
                  <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                    <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                    <ul class="fc-color-picker" id="color-chooser">
                      <li><a class="text-primary" href="#"><i class="fas fa-square"></i></a></li>
                      <li><a class="text-warning" href="#"><i class="fas fa-square"></i></a></li>
                      <li><a class="text-success" href="#"><i class="fas fa-square"></i></a></li>
                      <li><a class="text-danger" href="#"><i class="fas fa-square"></i></a></li>
                      <li><a class="text-muted" href="#"><i class="fas fa-square"></i></a></li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="input-group">
                    <input id="new-event" type="text" class="form-control" placeholder="事件标题">

                    <div class="input-group-append">
                      <button id="add-new-event" type="button" class="btn btn-primary">添加</button>
                    </div>
                    <!-- /btn-group -->
                  </div>
                  <!-- /input-group -->
                </div>
              </div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-md-9">
            <div class="card card-primary">
              <div class="card-body p-0">
                <!-- THE CALENDAR -->
                <div id="calendar"></div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
        
<!-- jQuery UI -->
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- AdminLTE App -->
<script src="{{ ADMIN_PUBLIC_PATH }}/dist/js/adminlte.min.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/moment/moment.min.js"></script><script src="../plugins/moment/locale/zh-cn.js"></script>
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/fullcalendar/main.min.js"></script><script src="../plugins/fullcalendar/locales/zh-cn.js"></script>
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/fullcalendar-daygrid/main.min.js"></script>
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/fullcalendar-timegrid/main.min.js"></script>
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/fullcalendar-interaction/main.min.js"></script>
<script src="{{ ADMIN_PUBLIC_PATH }}/plugins/fullcalendar-bootstrap/main.min.js"></script>
<!-- 特定页面脚本 -->
<script>
  $(function () {

    /* 初始化外部事件
     -----------------------------------------------------------------*/
    function ini_events(ele) {
      ele.each(function () {

        // 创建事件对象 (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // 它不需要有一个开始或结束
        var eventObject = {
          title: $.trim($(this).text()) // 使用元素内容作为事件标题
        }

        // 将事件对象存储在 DOM 元素中，以便以后访问它
        $(this).data('eventObject', eventObject)

        // 使用 jQuery UI draggable 插件
        $(this).draggable({
          zIndex        : 1070,
          revert        : true, // 将事件返回
          revertDuration: 0  //  拖动后的原始位置
        })

      })
    }

    ini_events($('#external-events div.external-event'))

    /* 初始化日历
     -----------------------------------------------------------------*/
    // 日历事件的日期（虚拟数据）
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()

    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendarInteraction.Draggable;

    var containerEl = document.getElementById('external-events');
    var checkbox = document.getElementById('drop-remove');
    var calendarEl = document.getElementById('calendar');

    // 初始化外部事件
    // -----------------------------------------------------------------

    new Draggable(containerEl, {
      itemSelector: '.external-event',
      eventData: function(eventEl) {
        console.log(eventEl);
        return {
          title: eventEl.innerText,
          backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
          borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
          textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
        };
      }
    });

    var calendar = new Calendar(calendarEl, {locale:'zh-cn',locale:'zh-cn',
      plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      'themeSystem': 'bootstrap',
      // 随机默认事件
      events    : [
        {
          title          : '全天的活动',
          start          : new Date(y, m, 1),
          backgroundColor: '#f56954', //red
          borderColor    : '#f56954', //red
          allDay         : true
        },
        {
          title          : '耗时的活动',
          start          : new Date(y, m, d - 5),
          end            : new Date(y, m, d - 2),
          backgroundColor: '#f39c12', // 黄色
          borderColor    : '#f39c12' // 黄色
        },
        {
          title          : '会议',
          start          : new Date(y, m, d, 10, 30),
          allDay         : false,
          backgroundColor: '#0073b7', // 蓝色
          borderColor    : '#0073b7' // 蓝色
        },
        {
          title          : '午餐',
          start          : new Date(y, m, d, 12, 0),
          end            : new Date(y, m, d, 14, 0),
          allDay         : false,
          backgroundColor: '#00c0ef', // 信息（浅绿色）
          borderColor    : '#00c0ef' // 信息（浅绿色）
        },
        {
          title          : '生日派对',
          start          : new Date(y, m, d + 1, 19, 0),
          end            : new Date(y, m, d + 1, 22, 30),
          allDay         : false,
          backgroundColor: '#00a65a', // 完成（绿色）
          borderColor    : '#00a65a' // 完成（绿色）
        },
        {
          title          : '点击谷歌',
          start          : new Date(y, m, 28),
          end            : new Date(y, m, 29),
          url            : 'http://google.com/',
          backgroundColor: '#3c8dbc', // 重要（浅蓝色）
          borderColor    : '#3c8dbc' // 重要（浅蓝色）
        }
      ],
      editable  : true,
      droppable : true, // 这允许将东西为拖放到日历上！
      drop      : function(info) {
        // 是否选中了“移除后删除”复选框？
        if (checkbox.checked) {
          // 如果是，从“可拖动事件”列表中删除该元素
          info.draggedEl.parentNode.removeChild(info.draggedEl);
        }
      }
    });

    calendar.render();
    // $('#calendar').fullCalendar()

    /* 添加事件 */
    var currColor = '#3c8dbc' // 默认为红色
    // 颜色选择器按钮
    var colorChooser = $('#color-chooser-btn')
    $('#color-chooser > li > a').click(function (e) {
      e.preventDefault()
      // 保存颜色
      currColor = $(this).css('color')
      // 为按钮添加颜色
      $('#add-new-event').css({
        'background-color': currColor,
        'border-color'    : currColor
      })
    })
    $('#add-new-event').click(function (e) {
      e.preventDefault()
      // 获取值并确保它不为 null
      var val = $('#new-event').val()
      if (val.length == 0) {
        return
      }

      // 创建事件
      var event = $('<div />')
      event.css({
        'background-color': currColor,
        'border-color'    : currColor,
        'color'           : '#fff'
      }).addClass('external-event')
      event.html(val)
      $('#external-events').prepend(event)

      // 添加可拖动功能
      ini_events(event)

      // 移除事件框中的内容
      $('#new-event').val('')
    })
  })
</script>
</body>
</html>
